<template>

  <el-container style="height: 100%; border: 1px solid #eee">

    <el-aside width="200px" style="background-color: rgb(238, 241, 246); height: 100%">
      <!--        第一个和第3个菜单打开-->
      <!--        <el-menu :default-openeds="['1', '3']" :default-active="'1-2'">-->

<el-menu :default-openeds="['0']" router
         background-color="#545c64"
         text-color="#fff"
         active-text-color="#ffd04b">
  <el-submenu v-for="(item,index) in this.$router.options.routes" :key="index" :index="index+''"
   v-if="item.show">
    <template slot="title"><i class="el-icon-message"></i> {{item.name}} </template>
    <!--            先遍历一维，再遍历2维-->
    <el-menu-item v-for="(item2,index2) in item.children" :key="index2" :index="item2.path"
                  :class="$route.path ===item2.path ?'is-active':''">
      {{item2.name}}
    </el-menu-item>

  </el-submenu>

</el-menu>

    </el-aside>

    <el-container>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>
export default {
  name: "Index.vue"
}
</script>

<style scoped>
el-header {
  /*background-color: #B3C0D1;*/
  /*color: #333;*/
  line-height: 60px;
}

el-aside {
  /*color: #333;*/
}

</style>